<template>

  <div>
    <uploader :key="uploader_key" :options="options" :fileStatusText="statusText" class="uploader-example"
              @file-success="onFileSuccess">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
           <uploader-btn >选择文件</uploader-btn>
        <uploader-btn :directory="true" >选择文件夹</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
  </div>
    
</template>
        
 
<script>


import { getToken } from "@/utils/auth";
export default {
 data() {
  return {
    uploader_key: new Date().getTime(),//这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）
    options: {
      target: 'http://localhost:8080/uploadCategory',//SpringBoot后台接收文件夹数据的接口
       chunkSize: 1024*1024*2,  
       simultaneousUploads: 3, //并发上传数
         headers: {
               Authorization: "Bearer " + getToken(),
          },
      testChunks: false//是否分片-不分片
    },
    statusText:{
    success: 'success',
    error: 'error',
    uploading: 'uploading',
    paused: 'paused',
    waiting: 'waiting',
    cmd5: 'cmd5'
    }
  };
},
methods:{
   onFileSuccess: function (rootFile, file, response, chunk) {
        console.log(response)
        //这里可以根据response（接口）返回的数据处理自己的实际问题（如：从response拿到后台返回的想要的数据进行组装并显示）
        //注，这里从文件夹每上传成功一个文件会调用一次这个方法
  }
}
 
}
</script>


<style>
  .uploader-example {
    width: 880px;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>